<script setup lang="ts">
import loading from "../components/loading.vue"
import { ref,onMounted } from 'vue'
import {moreClassicList} from '../api/api'
import { useRouter } from 'vue-router'
const router = useRouter()

const classicList = ref()
const getClassicList = async()=>{
    let data = await moreClassicList()
    classicList.value = data
    // console.log(data);
}

const goMovieDetail = (mid:number) => {
    router.push({
        name:'movieDetail',
        params: {
            id: mid, 
        }
    })
}

onMounted(()=>{
    getClassicList()
})
// moreClassicList
</script>

<template>
    <div class="classic-movie">
        <loading v-if="!classicList"></loading>
        <div class="card" v-for="el in classicList" :key="el.movieId" @click="goMovieDetail(el.movieId)">
            <img :src="el.poster" alt="">
            <div class="content">
                <p class="title">{{ el.movieInfo.title }}</p>
                <p class="englishTitle">{{ el.movieInfo.englishTitle }}</p>
                <p class="actors">{{ el.movieInfo.actors }}</p>
                <p class="showInfo">{{ el.movieInfo.showInfo }}</p>
            </div>
            <div class="score" v-if="el.score"><span>{{ el.score }}</span>分</div>
        </div>
    </div>
</template>

<style lang="scss" scoped>
.classic-movie{
    padding:15px;
    .card{
        display: flex;
        margin-bottom: 20px;
        img{
            width: 66px;
            height: 94px;
        }
        .content{
            display: flex;
            width: 60%;
            flex-direction: column;
            justify-content: space-between;
            margin-left: 10px;
            color: #666;
            font-size: 14px;
            .title{
                font-weight: bolder;
                font-size: 16px;
            }
            .showInfo{
                margin-bottom: 4px;
            }
        }
        .score{
            font-size: 12px;
            color: #666;
            span{
                color: #faaf00;
                font-size: 15px;
            }
        }
    }
}
</style>